<script setup lang="ts">
import { ElDialog, ElScrollbar } from 'element-plus';
import { propTypes } from '@/utils/propTypes';
import { onMounted, computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue';
import { isNumber } from '@/utils/is';
import { Icon } from '@iconify/vue';

const slots = useSlots();

const modelValue = defineModel<boolean>(propTypes.bool.def(false));
const close = () => {
  modelValue.value = false;
};

const props = defineProps({
  title: propTypes.string.def('Dialog'),
  fullscreen: propTypes.bool.def(false),
  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
});
const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight'];
  const attrs = useAttrs();
  const obj: any = { ...attrs, ...props };
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key];
    }
  }
  return obj;
});

const isFullscreen = ref(false);

onMounted(() => {
  isFullscreen.value = props.fullscreen;
});

const toggleFull = () => {
  isFullscreen.value = !unref(isFullscreen);
};

const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight);

watch(
  () => isFullscreen.value,
  async (val: boolean) => {
    await nextTick();
    if (val) {
      const windowHeight = document.documentElement.offsetHeight;
      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`;
    } else {
      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight;
    }
  },
  {
    immediate: true
  }
);

const dialogStyle = computed(() => {
  return {
    height: unref(dialogHeight)
  };
});
</script>

<template>
  <el-dialog
    v-bind="{ ...getBindValue }"
    :fullscreen="isFullscreen"
    :destroy-on-close="true"
    :lock-scroll="true"
    :draggable="true"
    :close-on-click-modal="false"
    :show-close="false"
    v-model="modelValue"
  >
    <template #header>
      <div class="dialog-header">
        <div>
          <slot name="title">
            {{ title }}
          </slot>
        </div>
        <div>
          <!-- https://github.com/iconify/iconify/tree/main/components/vue -->
          <!-- https://icon-sets.iconify.design/-->
          <el-icon>
            <Icon
              :icon="
                isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'
              "
              @click="toggleFull"
            ></Icon>
          </el-icon>
          <el-icon>
            <Icon icon="ep:close" @click="close"></Icon>
          </el-icon>
        </div>
      </div>
    </template>

    <el-scrollbar :style="dialogStyle">
      <slot></slot>
    </el-scrollbar>

    <template v-if="slots.footer" #footer>
      <div class="dialog-footer">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped lang="scss">
.el-dialog {
  &__header {
    .dialog-header {
      display: flex;
      justify-content: space-between;
      margin-right: -16px;
      margin-left: -16px;
      border-bottom: 1px solid var(--el-border-color);
      padding: 0 16px 16px 16px;
      .el-icon {
        margin: 0 5px;
        cursor: pointer;
      }
    }
  }

  &__footer {
    .dialog-footer {
      margin-right: -16px;
      margin-left: -16px;
      border-top: 1px solid var(--el-border-color);
      padding: 16px 16px 0 16px;
    }
  }
}
</style>
